<template>
  <div class="account-container">

    <div   class="card0">
      <h2>修改头像</h2>
     <div class="avator-edit">

       <div class="avatar">
         <img src="#" alt="">
       </div>
       <form method="post" action="/upload" enctype="multipart/form-data">

         <span> <input type="file" name="file"></span>

         <span><button type="submit" @click.prevent>提交</button></span>
       </form>
     </div>

    </div>

    <div  class="card1">
      <h1>修改密码</h1>
        <div class="account-font">
          <el-form :model="password" style=" width: 100%">
            <el-form-item label="原密码" style="margin:0 auto ;  width: 80%">
              <el-input
                v-model="password.oldPassword"
                type="password"
                clearable
                style="width: 80%"
                maxlength="20"
              />
            </el-form-item>

            <el-form-item label="新密码" style=" margin: 2vh auto ; width: 80% ">
              <el-input
                v-model="password.newPassword"
                type="password"
                clearable
                style=" width: 80%"
                maxlength="20"
                @keyup.enter.native="passwordChange"
              />
            </el-form-item>

            <div style="text-align: center">
              <el-button
                type="primary"
                :loading="passwordLoad"
                style="margin-left: 10px"
                size="small"
                @click="passwordChange"
              >
                提交
              </el-button>
            </div>
          </el-form>
        </div>
    </div>


    <div  class="card2">

        <h1>修改用户名</h1>
        <div class="account-font">
          <el-form style="width: 100%">
            <div>
              <el-form-item label="旧用户名"  label-width="7vw" style="margin:2vh auto ;  width: 80%">
                <el-input
                  v-model="name"
                  clearable
                  disabled
                  type="text"
                  style="width: 80%"
                  maxlength="20"
                  @keyup.enter.native="nameChange"
                />
              </el-form-item>


              <el-form-item label="用户名" label-width="7vw" style="margin:2vh auto ;  width: 80%">
                <el-input
                  v-model="userName"
                  clearable
                  type="text"
                  style="width: 80%"
                  maxlength="20"
                  @keyup.enter.native="nameChange"
                />
              </el-form-item>
            </div>

            <div style="text-align: center">
              <el-button
                type="primary"
                :loading="nameLoad"
                style="margin-left: 10px"
                size="small"
                @click="nameChange"
              >
                提交
              </el-button>
            </div>
          </el-form>
        </div>

    </div>


  </div>
</template>

<script>
// 导入全局变量
import { mapGetters } from 'vuex'
import { updateUserName, updatePassword } from '@/api/user'

export default {
  name: 'Account',
  // 重载路由刷新页面,导入后在页面直接调用 this.reload()
  // inject: ['reload'],
  computed: {
    ...mapGetters(['name'])
  },
  // 页面参数
  data() {
    return {
      userName: '',
      password: {
        oldPassword: '',
        newPassword: ''
      },
      nameLoad: false,
      passwordLoad: false,
      nameDialogVisible: false,
      passwordDialogVisible: false
    }
  },
  // 页面打开时加载
  mounted() {},
  // 方法
  methods: {
    // 控制变量刷新页面(刷新页面会重载路由，降低用户体验，慎用)
    reload() {
      return this.$store.commit('increment')
    },
    // 修改用户名事件
    nameChange() {
      this.nameLoad = true
      try {
        if (this.userName === '') {
          this.$message.error('用户名不能为空')
        } else {
          updateUserName({
            userName: this.userName
          })
            .then(async(response) => {
              // 接受返回的名称
              const { data } = response
              // 更改全局变量中的名称
              await this.$store.dispatch('user/setUserName', data)
              this.userName = ''
              await this.$alert('操作成功', '修改用户名', {
                confirmButtonText: '确定'
              })
            })
            .catch((_error) => {})
        }
      } finally {
        this.nameLoad = false
      }
    },
    // 修改密码事件
    passwordChange() {
      this.passwordLoad = true
      try {
        if (this.password.oldPassword === '') {
          this.$message.error('原密码不能为空')
        } else {
          const oldLength = this.password.oldPassword.split('').length
          if (oldLength < 6 || oldLength > 12) {
            this.$message.error('原密码应为6-12位')
          } else {
            if (this.password.newPassword === '') {
              this.$message.error('新密码不能为空')
            } else {
              const newLength = this.password.newPassword.split('').length
              if (newLength < 6 || newLength > 12) {
                this.$message.error('新密码应为6-12位')
              } else {
                if (this.password.oldPassword === this.password.newPassword) {
                  this.$message.error('原密码和新密码应为不同密码')
                } else {
                  updatePassword({
                    oldPassword: this.password.oldPassword,
                    newPassword: this.password.newPassword
                  })
                    .then(async(response) => {
                      // 接受返回的data 数据
                      const { data } = response
                      this.password = {
                        oldPassword: '',
                        newPassword: ''
                      }
                      await this.$alert('操作成功', '修改用户名', {
                        confirmButtonText: '确定'
                      })
                    })
                    .catch((_error) => {})
                }
              }
            }
          }
        }
      } finally {
        this.passwordLoad = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.account-container {
  .card0 ,  .card1 ,.card2  {
    background: white;
      border:  1px solid #e7dfe0;
      width: 50vw;
      margin: 10vh auto;
      overflow: hidden;
      padding: 2vh;
    border-radius: 1vh;

  }
  .card0 {
     .avator-edit {
       display: flex;

       .avatar {
         width: 10vw;
         height: 10vw;
         border-radius: 50%;
         background: #7d8caf;
       }
       form {
         transform: translate(4vw , -2vh);
         width: 60%;
         display: flex;
         flex-direction: column;



         span {
           &:nth-child(0) , &:nth-child(1) {
             flex: 1;
           }

           text-align: center;
           input {

             width: 70% ;
             display: block;
             margin: 0 auto;
             transform: translateY(1.5vh);
           }
         }



       }
     }
  }
}
</style>
